<style>
.bg {
 background-color: blue;
 height: 1px;
 border: 0;
}
</style>

<template>
  <div>
    <!-- <a href="#" class="btn btn-primary" @click="this.$back('items')">&lt;&lt;</a> -->
    &nbsp;<span style="float:left" class="glyphicon glyphicon-menu-left" @click="this.$back('items')">
      <!-- <img src="../../../static/singleleft2.png" width="25" height="25" @click="this.$back('items')"></img> -->
    </span>
    <span align="center"><b>安检详情列表</b></span>
    <!-- <span style="float:right" class="glyphicon glyphicon-search" @click="showSearch()"></span>&nbsp;&nbsp;&nbsp;&nbsp; -->
    <!-- <span style="float:right" class="glyphicon glyphicon-repeat" @click="refresh()"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->
    <div style="height:25px;"></div>
    <criteria-paged :model="model" v-ref:apage>
      <criteria partial='criteria' @condition-changed='search' v-ref:acondition>
        <div partial>
          <form >
            <div class="form-group">
              <label for="f_keyword">小区关键字：</label>
              <input class="form-group" id="f_keyword"
              v-model=model.f_keyword condition="f_residential_area like '%{}%'" />
            </div>
            <button type="button" class="btn btn-success" @click="search">查询</button>
            <button type="button" class="btn btn-default" @click="$parent.$parent.getVerify">更新审核信息</button>
            <div style="height:30px;"></div>
          </form>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid >
        <template partial='head'>
          <tr>
            <th rowspan="2">小区</th>
            <th rowspan="2">任务数/已检/未检</th>
            <th>最后安检状态</th>
            <th rowspan="2">通过/打回</th>
          </tr>
          <tr>
            <th>入户/拒检/到访不遇</th>
          </tr>
        </template>
        <template partial='body'>
          <td @click="$parent.$parent.$parent.inspect(row)">{{row.f_residential_area}}</td>
          <td @click="$parent.$parent.$parent.inspect(row)">{{row.n}}&nbsp;/&nbsp;{{row.checked}}&nbsp;/&nbsp;{{row.unchecked}}</td>
          <td @click="$parent.$parent.$parent.inspect(row)">{{row.centry}}&nbsp;/&nbsp;{{row.cdeny}}&nbsp;/&nbsp;{{row.cabsent}}</td>
          <td @click="$parent.$parent.$parent.inspect(row)">{{row.verified}}&nbsp;/&nbsp;{{row.withdrawn}}</td>
        </template>
      </data-grid>
    </criteria-paged>
    <div style="height:50px;"></div>
  </div>
</template>

<script>
import LocalPagedList from './LocalPagedList'
import Vue from 'vue'
import { PagedList } from 'vue-client'

export default {
  title: '小区列表界面 ResidentialAreaList',
  props: ['f_plan_id'],
  data() {
    return {
      model: Vue.android ? new LocalPagedList('计划小区分组', 5, {f_plan_id: 'this.f_plan_id'}) : new PagedList(Vue.url + 'sql/计划小区分组', 5, {f_plan_id: 'this.f_plan_id'})
    }
  },
  methods: {
    showSearch() {
      // this.show= true
      this.refresh()
    },
    refresh() {
      console.log("refresh items state")
      // hard code relationship
      this.$children[0].$children[1].search()
    },
    inspect(row) {
      this.$goto('check-plan-items', {f_plan_id: this.f_plan_id, f_residential_area: row.f_residential_area}, 'self', this.refresh)
    },
    getVerify () {
      HostApp.__callback__ = this.callback
      HostApp.__this__ = this
      HostApp.refreshPaperApproval({f_plan_id: this.f_plan_id})
    },
    callback (flag) {
      if (flag) {
        HostApp.alert('更新成功！')
        this.$refs.apage.$refs.acondition.search()
      } else {
        HostApp.alert('更新失败！')
      }
    }
  },
  ready() {
      this.model.f_plan_id = this.f_plan_id
      this.refresh()
  }
}
</script>
